<template>
  <view class="container">
    <uni-section title="老人基本信息" type="line" titleFontSize="large"></uni-section>
    <view class="elderInfo">
      <view class="top-container">
        <view class="infoLeft">
          <view>姓名:<text>王建国</text></view>
          <u-line></u-line>
          <view>性别:<text>男</text></view>
          <u-line></u-line>
          <view>联系电话:<text>13800000000</text></view>
          <u-line></u-line>
          <view>紧急电话:<text>13800000000</text></view>
          <u-line></u-line>
          <view>现住住址:<text>xxx市xxx区xxx路xxx小区</text>
          </view>
        </view>
        <view class="img">
          <image :src="elderAvatar" alt="" @click="handleToAvatar"></image>
        </view>
      </view>
    </view>
    <uni-section title="老人详情信息" type="line" titleFontSize="large"></uni-section>
    <view class="infoBottom">
      <view class="infoBottomLeft">
        <view>身份证号码:<text>33000000000000000000</text></view>
        <u-line></u-line>
        <view>身份证年份:<text>2000</text></view>
        <u-line></u-line>
        <view>证件类型:<text>身份证</text></view>
        <u-line></u-line>
        <view>家庭住址:<text>xxx市xxx区xxx路xxx小区</text></view>
        <u-line></u-line>
        <view>血型:<text>A</text></view>
        <u-line></u-line>
        <view>药物过敏史:<text>xxxxxxxxxxxxx</text></view>
        <u-line></u-line>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    handleToAvatar() {
      this.$tab.navigateTo('/pages/elderAvatar/index')
    },
  },
  computed: {
    elderAvatar() {
      return this.$store.state.user.elderAvatar
    }
  },
}
</script>
<style lang="scss" scoped>
page {
    background-color: #fff;
}
.container {
  height: 100vh;
  padding: 1%;
  // overflow: hidden;

  .elderInfo {
    display: flex;
    flex-direction: column;
    height: 100;
    box-shadow: 0px 0px 1px 2px #ccc;
    border-radius: 5%;
    overflow: hidden;
    margin-bottom: 1%;

    .top-container {
      display: flex;
      flex: 1;
      padding: 3%;
      background-color: #fff;
      
      .infoLeft {
        flex: 2;

        view {
          // 信息标注
          margin: 5% 0;
          font-size: large;
          font-weight: 500;

          text {
            // 信息内容
            margin-left: 5%;

          }
        }
      }

      .img {
        flex: 1;
        height: 160px;
        width: 100%;
        border: #ccc solid 3px;
        margin-top: 2%;
        border-radius: 7%;

        image {
          width: 100%;
          height: 100%;
          // padding: 10% 0 0 0;
          border-radius: 5%;
        }
      }

    }
  }

  .infoBottom {
    // background-color: #c0c0c0;
    padding: 3%;
    background-color: #fff;

    view {
      // 信息标注
      margin: 5% 0;
      font-size: large;
      font-weight: 500;

      text {
        // 信息内容
        margin-left: 5%;

      }
    }
  }
}
</style>